<template>
  <div class="page">
    <div class="logo-title">abcd69</div>
    <div class="ipt-box" v-if="status == 0">
      <div class="ipt-main">
        <div class="ipt-item-title">输入新的email</div>
        <div class="ipt-item">
          <div class="code-box">
            <van-field
              class="code-item-input"
              v-model="newUsername"
              placeholder="Enter your email"
            />
            <van-button class="code-button" @click="sendEmail"
              >Get verifcation code
            </van-button>
          </div>
        </div>
        <div class="ipt-item">
          <van-field
            class="ipt-item-input"
            v-model="code"
            placeholder="verifcation code"
          />
        </div>
      </div>
      <div class="confirm-box">
        <van-button class="confirm-btn" @click="handleEmail"
          >Confirm</van-button
        >
      </div>
    </div>

    <div class="info-box" v-if="status == 1">
      <div class="info-main">
        <div class="info-img-box">
          <img
            class="info-img"
            src="../../assets/images/login/success.png"
            alt=""
          />
        </div>
        <div class="info-text">修改邮件成功</div>
        <van-button class="info-btn" @click="goPersonal">confirm</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiGetPersonVerificationCode,
  apiForgotEmail,
  apiChangeUsername,
  apiGetInfo,
} from "../../request/api";
export default {
  name: "changeMail",
  data() {
    return {
      oldUsername: "",
      newUsername: "",
      code: "",
      password: "",
      new_password: "",
      status: 0,
      showPassword: false,
    };
  },
  created() {
    apiGetInfo().then((res) => {
      if (res.code == 200) {
        this.oldUsername = res.data.userName;
      }
    });
  },
  mounted() {},
  methods: {
    goPersonal() {
      this.$router.push("/personal");
    },
    sendEmail() {
      if (this.newUsername == "") {
        this.$toast.fail("请输入邮箱");
        return;
      }
      apiGetPersonVerificationCode(this.newUsername).then((res) => {
        if (res.code == 200) {
          this.$toast.success(res.msg);
        }
      });
    },
    handleEmail() {
      apiForgotEmail({
        username: this.newUsername,
        code: this.code,
      }).then((res) => {
        if (res.code == 200) {
          apiChangeUsername({
            newUsername: this.newUsername,
            oldUsername: this.oldUsername,
          }).then((res) => {
            if (res.code == 200) {
              this.status = 1;
            } else {
              this.$toast.fail(res.msg);
            }
          });
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    changePassword() {
      apiPersonChangePassword({
        username: this.email,
        password: this.password,
        passwordVerify: this.new_password,
      }).then((res) => {
        if (res.code == 200) {
          this.status = 2;
          console.log(res);
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.logo-title {
  font-size: 70px;
  font-weight: 800;
  color: #273458;
  margin: 166px auto 0;
  text-align: center;
}
.ipt-item-title {
  margin-bottom: 20px;
  font-size: 30px;
  color: #273458;
}
.ipt-item {
  margin-bottom: 40px;
}
.ipt-item-input {
  border: 1px solid #a6a6a6;
  height: 90px;
  align-items: center;
}
:deep(.van-field__control) {
  font-size: 28px;
}
.confirm-box {
  margin-top: 75px;
  .confirm-btn {
    width: 100%;
    height: 90px;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
    border: 1px solid #ffffff;
    font-size: 26px;
    color: #ffffff;
    font-weight: 400;
  }
}
.ipt-box {
  padding: 0 56px;
  margin-top: 254px;
  .ipt-main {
    .code-box {
      display: flex;
      align-items: center;
    }
    .code-item-input {
      border: 1px solid #a6a6a6;
      height: 90px;
      align-items: center;
      flex: 1;
    }
    .code-button {
      width: 262px;
      height: 90px;
      background: #273458;
      font-size: 26px;
      font-weight: 400;
      color: #ffffff;
      border: 1px solid #273458;
      box-sizing: border-box;
    }
  }
}
.set-box {
  padding: 0 56px;
  margin-top: 194px;
  .set-title {
    font-size: 28px;
    font-weight: bold;
    color: #273458;
    margin-bottom: 20px;
  }
  .show-psd {
    margin: 20px 0;
  }

  :deep(.van-checkbox__label) {
    font-size: 28px;
    line-height: 36px;
  }
  :deep(.van-checkbox__icon) {
    font-size: 36px;
  }
}
.info-box {
  padding: 0 90px;
  margin-top: 212px;
  .info-main {
    border: 1px solid #a6a6a6;
    padding: 51px 35px 20px;
    .info-img-box {
      width: 78px;
      text-align: center;
      height: 78px;
      background: #21b66d;
      border-radius: 50%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info-img {
      width: 30px;
      height: 21px;
    }
    .info-text {
      margin-top: 60px;
      font-size: 26px;
      font-weight: 400;
      color: #000000;
      text-align: center;
    }
    .info-btn {
      width: 100%;
      height: 73px;
      background: #273458;
      box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
      border: 1px solid #ffffff;
      font-size: 26px;
      color: #ffffff;
      font-weight: 400;
      margin-top: 60px;
    }
  }
}
</style>
